<template>
  <div class="app-container">

    <div class="permission-body">
      <div class="permission-top">

        <div class="permission-between">
          <div style="font-size:18px;">
            当前群组:{{$route.query.name}}
          </div>
          <!-- <el-checkbox
            :indeterminate="indeterminate"
            v-model="ischeckAll"
            @change="handleCheckAllChange"
          ><span style="font-size:18px;">全部</span></el-checkbox> -->
        </div>
      </div>
      <div
        class="permission-border"
        v-for="(allView,allViewIndex) in allViewPermissionData"
        :key="allView.id"
      >
        <div class="permission-top permission-between">
          <span style="font-size:16px;">{{allView.name}}</span>
          <el-checkbox
            :indeterminate="allView.indeterminate"
            v-model="allView.permissionStatus"
            @change="handleCheckAllViewChange(allViewIndex,allView.permission,$event)"
          >全部</el-checkbox>

        </div>
        <div
          v-for="(permission,permissionIndex) in allView.children"
          :key="permissionIndex"
        >
          <div
            class="permission-top"
            v-show="false"
          >
            <el-checkbox
              :indeterminate="permission.indeterminate"
              v-model="permission.permissionStatus"
              @change="handleCheckedSidebarAllChange(allViewIndex,permission.id,allView.permission,$event)"
              :key="permissionIndex"
              disabled
            ><span style="font-size:14px;">{{permission.name}}</span></el-checkbox>

          </div>

          <div class="permission-item">
            <el-checkbox
              v-for="permis in permission.children"
              v-model="permis.permissionStatus"
              @change="handleCheckedSidebarChange(allViewIndex,permis.id,allView.permission,$event)"
              :label="permis"
              :key="permis.id"
            >{{permis.name}}</el-checkbox>
          </div>
        </div>
      </div>
      <div class="permission-btn">
        <el-button
          type="primary"
          @click="savePermission()"
        >提交</el-button>
        <el-button @click="$router.go(-1)">返回</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { fetchViewPermission, fetchEditorPermission } from "@/api/table";

export default {
  data() {
    return {
      ischeckAll: false, //一级全选
      allViewPermissionData: [],
      indeterminate: false,
      updatePermissionId: []
    };
  },
  mounted() {
    this.getViewPermission();
  },
  methods: {
    handleCheckAllChange(e) {
      //层级一change
      this.ischeckAll = e;
      if (e == true) {
        this.indeterminate = false;
        for (let i = 0, len = this.allViewPermissionData.length; i < len; i++) {
          //二级全选反选不确定
          this.allViewPermissionData[i].permissionStatus = e;
          for (
            let j = 0, len1 = this.allViewPermissionData[i].children.length;
            j < len1;
            j++
          ) {
            this.allViewPermissionData[i].children[j].permissionStatus = e;
            for (
              let k = 0,
                len2 = this.allViewPermissionData[i].children[j].children
                  .length;
              k < len2;
              k++
            ) {
              this.allViewPermissionData[i].children[j].children[
                k
              ].permissionStatus = e;
            }
          }
        }
      } else {
        this.indeterminate = false;
        for (let i = 0, len = this.allViewPermissionData.length; i < len; i++) {
          //三级全选反选不确定
          this.allViewPermissionData[i].permissionStatus = e;
          for (
            let j = 0, len1 = this.allViewPermissionData[i].children.length;
            j < len1;
            j++
          ) {
            this.allViewPermissionData[i].children[j].permissionStatus = e;
            for (
              let k = 0,
                len2 = this.allViewPermissionData[i].children[j].children
                  .length;
              k < len2;
              k++
            ) {
              this.allViewPermissionData[i].children[j].children[
                k
              ].permissionStatus = e;
            }
          }
        }
      }
    },
    handleCheckAllViewChange(index, topId, e) {
      //二级change事件
      this.allViewPermissionData[index].permissionStatus = e;
      if (e == false) this.allViewPermissionData[index].indeterminate = false; //去掉二级不确定状态
      let childrenArray = this.allViewPermissionData[index].children;
      if (childrenArray)
        for (let i = 0, len = childrenArray.length; i < len; i++) {
          childrenArray[i].permissionStatus = e;
          for (
            let j = 0, len1 = childrenArray[i].children.length;
            j < len1;
            j++
          ) {
            childrenArray[i].children[j].permissionStatus = e;
          }
        }

      this.getIsCheckAll();
    },
    handleCheckedSidebarAllChange(topIndex, sonId, topId, e) {
      //三级change事件
      let childrenArray = this.allViewPermissionData[topIndex].children;
      let tickCount = 0,
        unTickCount = 0,
        len = childrenArray.length;

      for (let i = 0; i < len; i++) {
        if (sonId == childrenArray[i].id) childrenArray[i].permissionStatus = e;
        if (childrenArray[i].permissionStatus == true) tickCount++;
        if (childrenArray[i].permissionStatus == false) unTickCount++;
        for (
          let j = 0, len1 = childrenArray[i].children.length;
          j < len1;
          j++
        ) {
          if (sonId == childrenArray[i].id)
            childrenArray[i].children[j].permissionStatus = e;
        }
      }

      if (tickCount == len) {
        //三级全勾选
        this.allViewPermissionData[topIndex].permissionStatus = true;
        this.allViewPermissionData[topIndex].indeterminate = false;
      } else if (unTickCount == len) {
        //三级全不勾选
        this.allViewPermissionData[topIndex].permissionStatus = false;
        this.allViewPermissionData[topIndex].indeterminate = false;
      } else {
        this.allViewPermissionData[topIndex].permissionStatus = false;
        this.allViewPermissionData[topIndex].indeterminate = true; //添加二级不确定状态
      }

      this.getIsCheckAll();
    },
    handleCheckedSidebarChange(topIndex, sonId, topId, e) {
      //四级change事件
      const childrenArray = this.allViewPermissionData[topIndex].children;

      let tickCount = 0,
        unTickCount = 0,
        len = childrenArray.length,
        leng = 0;
      for (let i = 0; i < len; i++) {
        for (
          let j = 0, len1 = childrenArray[i].children.length;
          j < len1;
          j++
        ) {
          leng = childrenArray[i].children.length;
          if (sonId == childrenArray[i].id)
            childrenArray[i].children[j].permissionStatus = e;
          if (childrenArray[i].children[j].permissionStatus == true)
            tickCount++;
          if (childrenArray[i].children[j].permissionStatus == false)
            unTickCount++;
          if (tickCount == leng) {
            //四级全勾选
            this.allViewPermissionData[topIndex].permissionStatus = true;
            childrenArray[i].permissionStatus = true;
            this.allViewPermissionData[topIndex].indeterminate = false;
            childrenArray[i].indeterminate = false;
          } else if (unTickCount == leng) {
            //四级全不勾选
            this.allViewPermissionData[topIndex].permissionStatus = false;
            childrenArray[i].permissionStatus = false;
            this.allViewPermissionData[topIndex].indeterminate = false;
            childrenArray[i].indeterminate = false;
          } else {
            this.allViewPermissionData[topIndex].permissionStatus = false;
            childrenArray[i].permissionStatus = false;
            this.allViewPermissionData[topIndex].indeterminate = true; //添加二级不确定状态
            childrenArray[i].indeterminate = true;
          }
        }
      }

      this.getIsCheckAll();
    },
    getIsCheckAll() {
      let tickCount = 0,
        unTickCount = 0,
        ArrLength = this.allViewPermissionData.length;
      for (let j = 0; j < ArrLength; j++) {
        //全选checkbox状态
        if (this.allViewPermissionData[j].permissionStatus == true) tickCount++;
        if (this.allViewPermissionData[j].permissionStatus == false)
          unTickCount++;
      }

      if (tickCount == ArrLength) {
        //二级全勾选
        this.ischeckAll = true;
        this.indeterminate = false;
      } else if (unTickCount == ArrLength) {
        //二级全不勾选
        this.ischeckAll = false;
        this.indeterminate = false;
      } else {
        this.ischeckAll = false;
        this.indeterminate = true; //添加一级不确定状态
      }
    },
    //修改权限
    async savePermission() {
      this.updatePermissionId = [];
      const perms = this.allViewPermissionData;
      for (let i = 0, len = perms.length; i < len; i++) {
        if (
          perms[i].permissionStatus == true ||
          perms[i].indeterminate == true
        ) {
          this.updatePermissionId.push(perms[i].id);
        }
        for (let j = 0, len1 = perms[i].children.length; j < len1; j++) {
          if (
            perms[i].children[j].permissionStatus == true ||
            perms[i].children[j].indeterminate == true
          ) {
            this.updatePermissionId.push(perms[i].children[j].id);
          }
          for (
            let k = 0, len2 = perms[i].children[j].children.length;
            k < len2;
            k++
          ) {
            if (
              perms[i].children[j].children[k].permissionStatus == true ||
              perms[i].children[j].children[k].indeterminate == true
            ) {
              this.updatePermissionId.push(perms[i].children[j].children[k].id);
            }
          }
        }
      }
      await fetchEditorPermission({
        roleId: this.$route.query.roleId,
        permissionIds: this.updatePermissionId.toString()
      });
      this.$message({
        type: "success",
        message: "添加成功!"
      });
      this.$router.go(-1);
    },
    //获取全部和已选择权限
    async getViewPermission() {
      const viewPerMissionData = await fetchViewPermission({
        roleId: this.$route.query.roleId
      });
      let allView = viewPerMissionData.data;
      let allViewPermission = [];
      let allViewPermissionChecked = [];
      allView.map(item => {
        //permissionStatus  1选中  0 未选中
        if (item.parentId == 0) {
          let firstPerntId = {};
          firstPerntId.id = item.id;
          firstPerntId.name = item.name;
          firstPerntId.permission = item.permission;
          if (item.permissionStatus == 1) {
            firstPerntId.permissionStatus = true;
          } else {
            firstPerntId.permissionStatus = false;
          }
          firstPerntId.children = [];
          allViewPermission.push(firstPerntId);
        } else {
          allViewPermission.map(permission => {
            if (item.parentId == permission.id) {
              const secondPerntId = {};
              secondPerntId.id = item.id;
              secondPerntId.name = item.name;
              secondPerntId.permission = item.permission;
              if (item.permissionStatus == 1) {
                secondPerntId.permissionStatus = true;
              } else {
                secondPerntId.permissionStatus = false;
              }
              secondPerntId.children = [];
              permission.children.push(secondPerntId);
            } else {
              permission.children.map(items => {
                if (item.parentId == items.id) {
                  const nextPerntId = {};
                  nextPerntId.id = item.id;
                  nextPerntId.name = item.name;
                  if (item.permissionStatus == 1) {
                    nextPerntId.permissionStatus = true;
                  } else {
                    nextPerntId.permissionStatus = false;
                  }
                  items.children.push(nextPerntId);
                }
              });
            }
          });
        }
      });

      this.allViewPermissionData = allViewPermission;
    }
  }
};
</script>
<style lang="less" scoped>
.permission {
  &-body {
    background-color: rgba(242, 242, 242, 1);
    padding: 10px;
  }
  &-top {
    background-color: rgba(215, 215, 215, 1);
    padding: 10px;
  }
  &-item {
    background-color: rgba(215, 215, 215, 1);
    padding: 5px 40px;
  }
  &-border {
    margin: 5px 0;
  }
  &-between {
    display: flex;
    justify-content: space-between;
  }
  &-flex {
    display: flex;
  }
  &-all {
    display: flex;
    justify-content: flex-end;
  }
  &-btn {
    display: flex;
    justify-content: center;
  }
}
</style>

